<template>
    <div
        class="page-container"
        style="height:auto;"
    >
        <div
            class="in-container"
            style="height:auto;"
        >
            <el-tabs
                v-model='tabActive'
                @tab-click='tabClick'
                type='card'
                style="margin-bottom: 8px;"
            >
                <el-tab-pane
                    name='UnReconciled'
                    label='未对账'
                ></el-tab-pane>
                <el-tab-pane
                    name='AccountsReconciled'
                    label='已对账'
                ></el-tab-pane>
            </el-tabs>
            <UnReconciled
                :DocType="0"
                v-if="tabActive == 'UnReconciled'"
            ></UnReconciled>
            <AccountsReconciled
                :DocType="0"
                v-if="tabActive == 'AccountsReconciled'"
            ></AccountsReconciled>
        </div>
    </div>
</template>

<script setup>
import UnReconciled from "./components/UnReconciled.vue";
import AccountsReconciled from "./components/AccountsReconciled.vue";
import { defineComponent, ref } from 'vue'

const tabActive = ref('UnReconciled');

</script>

<style lang='scss' scoped>
:deep(.in-container .el-tabs--card>.el-tabs__header) {
    border-bottom: 1px solid var(--el-border-color-light) !important;
}
</style>
